[TypeScript]二次元配列からundefinedを取り除きつつ、型も除いた情報で定義する

• t_o_dと申します。
• map関数で生成された配列等、配列内にundefinedが入るケースがあります。
• その際にfilterで取り除くのですが、単純な条件だと型情報にはundefinedが残ったままです。
• そこで今回は型もundefinedを取り除いた情報になるようにfilterする方法を記録いたします。

環境

• mac OS Ventura 13.2.1
• typescript 4.9.5

修正前

• 修正前のコードは以下の通りです。

// 型 : ((string | number)[] | undefined)[]
const members = [
    [1, "takahashi"],
    [2, "kato"],
    undefined,
    [4, "saito"]
]

// 型は「((string | number)[] | undefined)[]」のまま
const selections = members.filter(member => member !== undefined);

// 出力 : [[1, "takahashi"], [2, "kato"], [4, "saito"]]
console.log(selections)

• 上記のようにundefinedを取り除くだけならfilterに条件を書くだけで可能ですが、型の情報にはundefinedが残ったままです。

修正後

• 修正後のコードは以下の通りです。

// 型 : ((string | number)[] | undefined)[]
const members = [
    [1, "takahashi"],
    [2, "kato"],
    undefined,
    [4, "saito"]
]

// 型 : (string | number)[][]
const selections = members.filter((member): member is NonNullable<typeof member> => member !== undefined);

// 出力 : [[1, "takahashi"], [2, "kato"], [4, "saito"]]
console.log(selections)

• 修正内容として、filter関数内でユーティリティ型のNonNullableを利用しています。
• NonNullable<任意の型>のように指定することで、nullとundefinedを除いた型を新たに構築することができます。
• その構築された型情報をis演算子で値に割り当てることで、型もundefinedを取り除いた情報として定義されます。
• 以上です。

参考

• NonNullable
• Using type predicates
• user-defined type guard

アノテーション株式会社について

アノテーション株式会社は、クラスメソッド社のグループ企業として「オペレーション・エクセレンス」を担える企業を目指してチャレンジを続けています。「らしく働く、らしく生きる」のスローガンを掲げ、様々な背景をもつ多様なメンバーが自由度の高い働き方を通してお客様へサービスを提供し続けてきました。現在当社では一緒に会社を盛り上げていただけるメンバーを募集中です。少しでもご興味あれば、アノテーション株式会社WEBサイトをご覧ください。